<template>
  <div class="data-screen">
    <!-- 顶部标题 -->
    <div class="header">
      <h1>基于个性化联邦学习的智能垃圾分类</h1>
      <div class="admin-button" @click="goToAdmin">
        <span>进入管理系统</span>
      </div>
    </div>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 左侧图表 -->
      <div class="left-panel">
        <div class="chart-box">
          <h3>每日垃圾投放重量</h3>
          <div id="accuracyChart" class="chart"></div>
        </div>
        <div class="chart-box">
          <h3>垃圾占比TOP5</h3>
          <div id="userParticipationChart" class="chart"></div>
        </div>
      </div>

      <!-- 中间地图 -->
      <div class="center-panel">
        <!-- <div id="chinaMap" class="map-container"></div> -->
        <ChinaMap></ChinaMap>
      </div>

      <!-- 右侧图表 -->
      <div class="right-panel">
        <div class="chart-box">
          <h3>各小区垃圾收录情况</h3>

          <div id="modelTrainingChart" class="chart"></div>
        </div>
        <div class="chart-box">
          <h3>垃圾分类占比</h3>
          <div id="wasteTypeChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ChinaMap from "./map.vue";
import { onMounted, onUnmounted } from "vue";
import { ElNotification } from 'element-plus'
import {
  selectLaunchByPoint,
  selectLaunchByDate,
  selectLaunchByType,
  selectLaunchByMaterialId,
} from "@/api/system/screen";
import {
  listLaunch
} from "@/api/system/launch";
import { listTrash } from "@/api/system/trash";
import * as echarts from "echarts";

const router = useRouter();
const modelTrainingY = ref([]);
const modelTrainingX = ref([]);

const rightBottom = ref([]);
const leftBottom = ref([]);
const leftTopX = ref([]);
const leftTopY = ref([]);

// 跳转到管理系统
const goToAdmin = () => {
  router.push("/user1");
};

// 右上角图表
const getmodelTrainingChart = async () => {
  try {
    let result = await selectLaunchByPoint();
    if (result.code === 200) {
      result.data.forEach((item) => {
        modelTrainingX.value.push(item.POINTNAME);
      });
      result.data.forEach((item) => {
        modelTrainingY.value.push(item.SUMWEIGHT);
      });
    }
  } catch (error) {}
};
// 右下角图表
const getrightBottom = async () => {
  try {
    let result = await selectLaunchByType();
    if (result.code === 200) {
      console.log("result.data", result.data);
      result.data.forEach((item, index) => {
        rightBottom.value.push({
          value: item.SUMWEIGHT,
          name: item.MATERIALTYPE,
          itemStyle: {
            color:
              index == 0
                ? "#37a2da"
                : index == 1
                ? "#32c5e9"
                : index == 2
                ? "#9fe6b8"
                : "#ffdb5c",
          },
        });
      });

    }
  } catch (error) {}
};
// 左上角图表
const getleftTop = async () => {
  try {
    let result = await selectLaunchByDate();
    if (result.code === 200) {
      getMap(result.data);
    }
  } catch (error) {}
};

const getMap = (data) => {
  let leftTopMap = new Map();
  data.forEach((item, index) => {
    if (!leftTopMap.has(item.LAUNCHDATE)) {
      leftTopMap.set(item.LAUNCHDATE, []);
    }
    leftTopMap.get(item.LAUNCHDATE).push({
      SUMWEIGHT: item.SUMWEIGHT,
    });
  });

  for (let [key, value] of leftTopMap) {
    leftTopX.value.push(key);
    let sum = 0;
    value.forEach((item, index) => {
      sum += item.SUMWEIGHT;
    });
    leftTopY.value.push(sum);
  }
};
// 左下角图表
const getleftBottom = async () => {
  try {
    let result = await selectLaunchByMaterialId();
    if (result.code === 200) {
      result.data.forEach((item, index) => {
        leftBottom.value.push({
          value: item.SUMWEIGHT,
          name: item.MATERIALNAME,
        });
      });
    }
  } catch (error) {}
};
// 图表实例对象
let charts = [];

// 初始化图表
const initCharts = () => {
  const accuracyChart = echarts.init(document.getElementById("accuracyChart"));
  accuracyChart.setOption({
    title: { show: false },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,0.7)",
      borderColor: "rgba(0,234,255,0.2)",
      textStyle: { color: "#fff" },
      axisPointer: {
        type: "line",
        lineStyle: { color: "rgba(0,234,255,0.2)", width: 1, type: "solid" },
      },
    },
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      // data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      data: leftTopX.value,
      axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
      axisLabel: { color: "#fff" },
    },
    yAxis: {
      type: "value",
      name: "总重量(kg)",
      axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
      splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
      axisLabel: { color: "#fff" },
    },
    series: [
      {
        // data: [85, 88, 90, 93, 95, 97],
        data: leftTopY.value,
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 12,
        lineStyle: {
          width: 4,
          shadowColor: "rgba(55,162,218,0.5)",
          shadowBlur: 10,
        },
        areaStyle: {
          opacity: 0.4,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(55,162,218,0.8)" },
            { offset: 1, color: "rgba(55,162,218,0.1)" },
          ]),
        },
        itemStyle: {
          color: "#37a2da",
          borderWidth: 3,
          shadowColor: "rgba(55,162,218,0.7)",
          shadowBlur: 10,
        },
        emphasis: {
          scale: true,
          focus: "series",
        },
        animation: true,
        animationDuration: 1000,
        animationEasing: "cubicOut",
      },
    ],
  });
  charts.push(accuracyChart);

  // 坐下
  const userParticipationChart = echarts.init(
    document.getElementById("userParticipationChart")
  );
  userParticipationChart.setOption({
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,0.7)",
      borderColor: "rgba(0,234,255,0.2)",
      textStyle: { color: "#fff" },
    },
    legend: {
      orient: "vertical",
      right: "5%",
      top: "center",
      textStyle: { color: "#fff" },
    },
    series: [
      {
        type: "pie",
        radius: ["45%", "70%"],
        center: ["40%", "50%"],
        avoidLabelOverlap: true,
        itemStyle: {
          borderColor: "#0f1a30",
          borderWidth: 3,
          shadowColor: "rgba(0,0,0,0.3)",
          shadowBlur: 10,
        },
        label: {
          show: true,
          color: "#fff",
          formatter: "{b}\n{d}%",
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        // data: [
        //   { value: 40, name: "积极参与", itemStyle: { color: "#37a2da" } },
        //   { value: 30, name: "一般参与", itemStyle: { color: "#32c5e9" } },
        //   { value: 20, name: "较少参与", itemStyle: { color: "#9fe6b8" } },
        //   { value: 10, name: "未参与", itemStyle: { color: "#ffdb5c" } },
        // ],
        data: leftBottom.value,
        emphasis: {
          scale: true,
          scaleSize: 10,
        },
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return Math.random() * 200;
        },
      },
    ],
  });
  charts.push(userParticipationChart);

  // 模型训练情况图表
  const modelTrainingChart = echarts.init(
    document.getElementById("modelTrainingChart")
  );
  modelTrainingChart.setOption({
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,0.7)",
      borderColor: "rgba(0,234,255,0.2)",
      textStyle: { color: "#fff" },
    },
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      // data: ["第1轮", "第2轮", "第3轮", "第4轮", "第5轮"],
      data: modelTrainingX.value,
      axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
      axisLabel: { color: "#fff" },
    },
    yAxis: {
      type: "value",
      name: "垃圾重量",
      axisLine: { lineStyle: { color: "rgba(255,255,255,0.2)" } },
      splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
      axisLabel: { color: "#fff" },
    },
    series: [
      {
        // data: [0.5, 0.4, 0.3, 0.2, 0.1],
        data: modelTrainingY.value,
        type: "line",
        name: "垃圾重量",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: "#91cc75",
          borderWidth: 2,
        },
        emphasis: {
          scale: true,
          focus: "series",
        },
        animation: true,
        animationDuration: 1000,
        animationEasing: "cubicOut",
      },
    ],
  });
  charts.push(modelTrainingChart);

  // 垃圾分类占比图表
  const wasteTypeChart = echarts.init(
    document.getElementById("wasteTypeChart")
  );
  wasteTypeChart.setOption({
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,0.7)",
      borderColor: "rgba(0,234,255,0.2)",
      textStyle: { color: "#fff" },
    },
    legend: {
      orient: "vertical",
      right: "5%",
      top: "center",
      textStyle: { color: "#fff" },
    },
    series: [
      {
        type: "pie",
        radius: "60%",
        center: ["40%", "50%"],
        roseType: "radius",
        itemStyle: {
          borderColor: "#0f1a30",
          borderWidth: 2,
        },
        label: {
          color: "#fff",
        },
        // data: [
        //   { value: 35, name: "可回收物", itemStyle: { color: "#37a2da" } },
        //   { value: 30, name: "厨余垃圾", itemStyle: { color: "#32c5e9" } },
        //   { value: 25, name: "其他垃圾", itemStyle: { color: "#9fe6b8" } },
        //   { value: 10, name: "有害垃圾", itemStyle: { color: "#ffdb5c" } },
        // ],
        data: rightBottom.value,
        emphasis: {
          scale: true,
          scaleSize: 10,
        },
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return Math.random() * 200;
        },
      },
    ],
  });
  charts.push(wasteTypeChart);
};

// 监听窗口大小变化
const handleResize = () => {
  charts.forEach((chart) => chart.resize());
};
function notify() {
  console.log("notify");

  listLaunch({ pageNum: 1, pageSize: 1000 }).then((response) => {
    response.rows.forEach((item) => {

      if (item.trashType !== item.materialType) {
        console.log('类型不匹配');
        ElNotification({
          title: "提示",
          message: `用户${item.userName}在点位名称为${item.pointName}的垃圾桶类型与垃圾类型不匹配`,
          type: "warning",
        });
      }
    });
  });
  listTrash({ pageNum: 1, pageSize: 1000 }).then((response) => {
    response.rows.forEach((item) => {
     

      if (item.capacityUse / item.capacitySum > 0.8) {
        console.log('满载');
        ElNotification({
          title: "提示",
          message: `${item.trashName}的垃圾利用率超过80%`,
          type: "warning",
        });
      }
    });
  });
}

onMounted(() => {
  Promise.all([
    getmodelTrainingChart(),
    getrightBottom(),
    getleftTop(),
    getleftBottom(),
  ]).then(() => {
    initCharts();
  });
  setTimeout(() => {
    notify();
  },500)
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  charts.forEach((chart) => chart.dispose());
});
</script>

<style lang="scss" scoped>
.data-screen {
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at center, #1a2a4f 0%, #0f1a30 100%);
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
          90deg,
          rgba(0, 234, 255, 0.03) 1px,
          transparent 1px
        )
        0 0 / 20px 20px,
      linear-gradient(0deg, rgba(0, 234, 255, 0.03) 1px, transparent 1px) 0 0 /
        20px 20px;
    pointer-events: none;
  }

  .header {
    text-align: center;
    // margin-bottom: 40px;
    position: relative;
    padding: 20px 0;

    &::before,
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 200px;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 234, 255, 0.5),
        transparent
      );
    }

    &::before {
      left: 50%;
      transform: translateX(-50%);
    }

    &::after {
      left: 50%;
      transform: translateX(-50%) rotate(90deg);
      width: 100px;
      bottom: 50%;
    }

    h1 {
      font-size: 42px;
      font-weight: bold;
      letter-spacing: 6px;
      text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.83%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0;
      animation: titleGlow 2s ease-in-out infinite alternate;
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    gap: 30px;
    padding: 0 20px;

    .left-panel,
    .right-panel {
      flex: 1;
      min-width: 380px;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .center-panel {
      flex: 2;
      min-width: 600px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
        border: 2px solid rgba(0, 234, 255, 0.2);
        border-radius: 20px;
        box-shadow: 0 0 30px rgba(0, 234, 255, 0.1);
        pointer-events: none;
        animation: borderGlow 3s ease-in-out infinite;
      }
    }

    .chart-box {
      flex: 1;
      background: linear-gradient(
        145deg,
        rgba(21, 46, 89, 0.9) 0%,
        rgba(15, 26, 48, 0.8) 100%
      );
      border-radius: 15px;
      padding: 25px;
      position: relative;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
        inset 0 2px 10px rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5),
          inset 0 2px 10px rgba(255, 255, 255, 0.2);
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 15px;
        border: 1px solid rgba(0, 234, 255, 0.2);
        box-shadow: inset 0 0 20px rgba(0, 234, 255, 0.1);
        pointer-events: none;
      }

      h3 {
        margin: 0 0 20px 0;
        font-size: 20px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);

        &::before {
          content: "";
          display: block;
          width: 4px;
          height: 20px;
          background: #00eaff;
          border-radius: 2px;
          box-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
        }
      }

      .chart {
        height: calc(100% - 40px);
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.02);
        }
      }
    }
  }
}

@keyframes titleGlow {
  from {
    text-shadow: 0 0 20px rgba(0, 234, 255, 0.3);
  }
  to {
    text-shadow: 0 0 30px rgba(0, 234, 255, 0.6);
  }
}

@keyframes borderGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 234, 255, 0.1);
    border-color: rgba(0, 234, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 234, 255, 0.2);
    border-color: rgba(0, 234, 255, 0.4);
  }
}
</style>
<style lang="scss" scoped>
.data-screen {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0f1a30 0%, #1a2a4f 100%);
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="%2313253C" stroke-width="2" fill="none"/></svg>');
    opacity: 0.1;
    pointer-events: none;
  }

  .header {
    text-align: center;
    //margin-bottom: 30px;
    position: relative;
    //padding-bottom: 15px;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 3px;
      background: linear-gradient(90deg, transparent, #00eaff, transparent);
    }

    h1 {
      font-size: 36px;
      letter-spacing: 4px;
      text-shadow: 0 2px 10px rgba(0, 234, 255, 0.3);
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.83%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0;
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 0 10px;

    .left-panel,
    .right-panel {
      flex: 1;
      min-width: 380px;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .center-panel {
      flex: 2;
      min-width: 600px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border: 2px solid rgba(0, 234, 255, 0.1);
        border-radius: 15px;
        pointer-events: none;
      }
    }

    .chart-box {
      flex: 1;
      background: linear-gradient(
        145deg,
        rgba(21, 46, 89, 0.8) 0%,
        rgba(15, 26, 48, 0.6) 100%
      );
      border-radius: 12px;
      padding: 20px;
      position: relative;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.05);

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        border: 1px solid rgba(0, 234, 255, 0.1);
        pointer-events: none;
      }

      h3 {
        margin: 0 0 15px 0;
        font-size: 18px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 8px;

        &::before {
          content: "";
          display: block;
          width: 4px;
          height: 16px;
          background: #00eaff;
          border-radius: 2px;
        }
      }

      .chart {
        height: calc(100% - 36px);
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.01);
        }
      }
    }
  }
}

.admin-button {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 20px;
  background: linear-gradient(92deg, #0072ff 0%, #00eaff 100%);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 234, 255, 0.3);

  &:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 0 30px rgba(0, 234, 255, 0.5);
  }

  span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
